<template>
  <div>
    <table>
      <thead>
        <tr>
          <td>编号</td>
          <td>商品名称</td>
          <td>价格</td>
          <td>数量</td>
          <td>小计</td>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in list" :key="item.id">
          <td>
            <input type="checkbox" v-model="item.checked" />
            {{ item.id }}
          </td>
          <td>{{ item.name }}</td>
          <td>{{ item.price }}</td>
          <td>
            <button @click="item.num--">-</button>
            {{ item.num }}
            <button @click="item.num++">+</button>
          </td>
          <td>
            {{ item.num * item.price }}
          </td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td colspan="5">
            总价:{{ totalPrice }}
            总价:{{ totalPrice }}
            总价:{{ totalPrice }}
          </td>
        </tr>
      </tfoot>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {
          id: "1001",
          name: "雅诗兰黛",
          price: 23,
          num: 2,
          checked: false,
        },
        {
          id: "1002",
          name: "兰蔻",
          price: 1273,
          num: 3,
          checked: false,
        },
        {
          id: "1003",
          name: "自然堂",
          price: 123,
          num: 1,
          checked: true,
        },
      ],
    };
  },
  computed: {
    totalPrice() {
      console.log('----------计算属性--------------');
      return this.list
        .filter((item) => item.checked)
        .reduce((prev, cur) => prev + cur.price * cur.num, 0);
    },
  },
};
</script>

<style lang="scss">
table {
  width: 700px;
  border-collapse: collapse;
  td {
    border: 1px solid #000;
    padding: 5px;
    text-align: center;
  }
}
</style>
